<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div style="height:2000px"></div>
  <div class="box" style="height:100px;background-color: pink;">
    <!-- 不要设置为src，否则就会立即加载图片 -->
    <img data-src="https://yanxuan-item.nosdn.127.net/79f289a4e975fd030d5c37b98b9282c5.jpg" alt="">
  </div>
  <script>
    // 目标：监听滚动条是否到达目标可视区
    // 创建一个空的观察者对象： IntersectionObserver原生js的Api,参数：侦听结果的回调函数
    const observer = new IntersectionObserver(([{ isIntersecting
    }]) => {
      // 判断侦听的dom是否到达可视区
      // console.log(isIntersecting)
      if (isIntersecting) {
        // 获取图片地址
        const src = document.querySelector('img').getAttribute('data-src')
        // 给图片赋属性
        document.querySelector('img').setAttribute('src', src)
        // 取消侦听
        observer.unobserve(document.querySelector('.box'))
      }
    })
    // 开始侦听：参数为要侦听的目标dom
    observer.observe(document.querySelector('.box'))

  </script>

</body>

</html>